How to add custom social share buttons to blogger posts

Hello friends in this post i am going to tell you how to add custom social media share buttons to blogger posts. In my previous post i had mentioned How to add social media Rounded share button to blogger post. Almost every website or blog getting popular because of the socialmedia. Socialmedia has the ability to send more traffic to websites or blogs. The biggest and popular socialmedia's like facebook & whatsapp plays major role to get more traffic. If you have any blog & want to add socialmedia share buttons; then i have provided simple steps; just follow these steps and add these share buttons to your blog.

In this article i will tell you how to add large share buttons to blogger blogspot. I have already added these share buttons in my blog; you can check it for a demo. I have added share buttons like facebook, twitter, google plus, Pin & whatsapp. If you want more share buttons then suggest me i will add more share buttons. I have provided below Html & Css codes. Just add these codes carefully. So follow the below steps to add these share buttons to your blog.

Also Read: How to add Facebook like and share buttons to blogger

Also Read:- How to add social media Rounded share button to blogger post

Steps to add custom social share buttons to blogger posts:-

(Before editing codes first take a backup of your theme. Because if you will do any mistake then you can restore it)

1. First login to Blogger, then goto Theme.

2. Now tap on Backup/Restore & download your file.

3. Now proceed to Edit Html.

4. Inside the code area press for Ctrl+F key. You will get a search box.

5. Now enter <head> in search box and search it.

6. Then copy & paste the below codes below the <head> tag. (If you already have these codes in your theme then don't add this)

7. Now search for </head> & copy and paste the below CSS codes above the </head> tag.

CSS codes:-

<b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>
 /*--------------------------------------------
 Custom Social Media Share Buttons for Blogger
 Designed by: https://sandeep980.blogspot.in
-----------------------------------------------*/

.mycustomshare {
 text-align: center;
 }
 .mycustomshare a {
 background: #3a579a;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 13px 5px 13px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .mycustomshare a:hover{
 background: #314a83;
 }

.mycustomshareg {
 text-align: center;
 }
 .mycustomshareg a {
 background: #df4a32;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .mycustomshareg a:hover{
 background: #be3f2b;
 }

.mycustomsharet {
 text-align: center;
 }
 .mycustomsharet a {
 background: #00abf0;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .mycustomsharet a:hover{
 background: #0092cc;
 }

.mycustomsharep {
 text-align: center;
 }
 .mycustomsharep a {
 background: #cd1c1f;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 13px 5px 13px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .mycustomsharep a:hover{
 background: #ae181a;
 }
</style>
 </b:if>

8. I have provided two ways to add these share buttons to your blog.

If you want to Add these share buttons below your post title then follow the below steps:-

Add share buttons below post title:

Now search for this code <div class='post-header-line-1'/> & copy and paste the HTML Part codes below the above codes. Again search for the codes if you find these codes again; then copy and paste the HTML Part codes below the codes.

If you want to add these share buttons below your posts then follow the below steps to add these share buttons below your post footer.

Add share buttons below post footer:

Now search for this code <div class='post-footer'> and copy and paste the Html codes below the above codes. Again search for the above code; if you find again the copy and paste the Html codes again below the above codes.

If you cannot find these codes in your theme then search for this code <div class='post-footer-line post-footer-line-1'> and copy and paste the Html codes below the codes. Again search for the above code; if you find these code line again; then copy and paste the Html codes below the above codes.

HTML Part Codes:-

<b:if cond='data:blog.pageType == "item"'>

<div>
<p><strong>Share this:</strong></p>
<mycustomshare class='mycustomshare'>
 <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/> Share </a></mycustomshare>
<mycustomshareg class='mycustomshareg'>
 <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&amp;t=" + data:post.title' target='_blank' title='Google Share'><i class='fa fa-google-plus'/> Share  </a></mycustomshareg>
<mycustomsharet class='mycustomsharet'>
 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&amp;text=" + data:post.title + " via @sandeep980blog - "' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/> Share  </a></mycustomsharet>
<mycustomsharep class='mycustomsharep'>
 <a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description=" + data:post.title' target='_blank' title='Pin It'> <i class='fa fa-pinterest'/> Share  </a></mycustomsharep>
<br/>
<a href='https://sandeep980.blogspot.com/2017/10/steps-to-add-custom-social-share.html' rel='nofollow' target='_blank' style='font-size: 13px; float: right; margin: 5px;'>Share Buttons Widget</a>
  <br/>
</div>
</b:if>

9. Now goto Html part codes; that you have added in your theme and add your twitter name in place of my twitter user name @sandeep980blog

10. Then save your theme. Now Goto mobile theme and choose custom mobile theme in the drop down menu and save it. Now visit your blog & see how's it looking.

Share this:

Share Share Share Share

11 comments:

Rooney N19 February 2018 at 00:56
Thanks very much. It worked on my blog. https://fly4study.blogspot.com
Rooney N19 February 2018 at 02:04
Hello Sandeep mind only works on webview. Can you help me so that I can see the share icons on mobile view?
Rooney N20 February 2018 at 00:12
Ok i did it today and it worked. Thanks very much bro. will always visit your blog for updates. Thanks once more. I will also need whatsapp with time
Anonymous9 March 2018 at 05:26
thanks
Jaisy Bonie30 March 2018 at 13:45
Visited there last weekend with a group of friends, and had all the fun we could handle. I really like the ambiance at home studios NYC. There's a decent draft beer selection at a reasonable price and the bartenders are good at what they do.
Anamika A Chattopadhyaya3 December 2018 at 21:40
Hi Sandeep, this post was indeed helpful. My simple request is, could you kindly add Instagram share button as well? Once you update the post with instagram, bloglovin, I would try your method and use the codes :) Thank you!
www.naturalbeautyandmakeup.com
Anonymous10 May 2019 at 22:53
Hello friends, how iis all, and wnat you want tto say
concerning thyis paragraph, in my view its actually awesome
in support of me.
Anonymous21 June 2019 at 14:45
I'm curious to find out what blog system you are utilizing?
I'm having some minor security problems with my latest website and I
would like to find something more safeguarded. Do you have any suggestions?

OffersTricks.in

Friday 1 March 2019